<template>
  <div>
    <slot name="topImg"></slot>
    <van-tree-select height="100vh" :items="items" :main-active-index.sync="active" @click-nav="clickNav">
      <template #content>
        <slot name="homeunderwear"></slot>
        <div class="topBanner" v-show="length == 2">
          <img v-lazy="bannerArr[0]" alt=""/>
        </div>
        <h2 class="title">{{ title }}</h2>
        <!-- 商品列表 grid组件 -->
        <griditem :homeArr="imgArr"></griditem>
        <slot name="homecontent"></slot>
        <div class="BottomBanner" v-show="length >= 1" :class="{bigBanner:num==11}">
          <img v-lazy="length == 1 ? bannerArr[0] : bannerArr[1]" :class="{ bigImg: num == 11 }" />
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { ReqClassifyData } from "@/request/classifyapi";
import griditem from "./griditem";
export default {
  components: {
    griditem,
  },
  data() {
    return {
      // 侧边栏导航的标题
      items: [
        { text: "热门推荐" },{ text: "上装" },{ text: "下装" },{ text: "裙装" },{ text: "套装" },{ text: "女鞋" },
        { text: "女包" },{ text: "饰品" },{ text: "男装" },{ text: "男鞋" },{ text: "大码女装" },{ text: "美妆个护" },
        { text: "居家内衣" },{ text: "居家好物" },
      ],
      imgArr: [], //用来存方法商品图片的空数组
      title: "",
      active: 0,
      num: "", //获取索引
      bannerArr: [], //装banner图片的数组
      length: "", //获取banner图片数量
    };
  },
  mounted() {
    //分类页面初始化渲染的数据
    ReqClassifyData()
      .then((res) => {
        this.title = res[0]["title"];
        this.imgArr = res[0]["goodsList"];
        this.bannerArr = res[0]["bannerArr"];
        this.length = this.length = res[0].bannerArr.length;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    clickNav(index) {
      //点击哪个标题就渲染哪个数据
      ReqClassifyData()
        .then((res) => {
          this.title = res[index]["title"]; //获取标题
          this.imgArr = res[index]["goodsList"]; //请求商品列表数据
          this.bannerArr = res[index]["bannerArr"];
          this.length = res[index].bannerArr.length; //点击的时候获取banner图片长度
        })
        .catch((err) => {
          console.log(err);
        });
      this.num = index;  //获取索引  根据这个索引动态绑定类样式
      // 给父组件传递isShow 用来控制是否显示两张banner图片
      this.$emit("toggleShow", index);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tree-select {
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}

/deep/.van-tree-select__nav-item {
  padding: 22px;
  text-align: center;
}
/deep/.van-sidebar-item--select::before {
  width: 5px;
}
/deep/.van-sidebar-item--select,
.van-sidebar-item--select:active {
  background-color: #f7f8fa;
  color: #e52a1f;
}
/deep/.van-tree-select__content {
  flex: 3;
}
/deep/ .title {
  font-size: 36px;
  color: #000;
  font-weight: 700;
  margin: 20px 0 0 20px;
}
.topBanner {
  position: relative;
  width: 534px;
  height: 152px;
  margin: 20px 0 0 20px;
  img {
    width: 100%;
  }
  .hotSale,
  .hotRecommend {
    position: absolute;
    top: 18px;
    left: 20px;
    font-size: 48px;
    color: #fff;
    font-weight: 700;
  }
  .hotRecommend {
    left: 21px;
    top: 75px;
    background-color: #e84525;
  }
}
.BottomBanner {
  position: absolute;
  margin-left: 20px;
  bottom: 220px;
  img {
    width: 534px;
    height: 152px;
  }
  .text {
    position: absolute;
    font-weight: bold;
    color: #000000;
    left: 20px;
    bottom: 0;
  }
  .fashionFemaleClothing {
    bottom: 80px;
    font-size: 48px;
  }
  .mostPopular {
    font-size: 30px;
    opacity: 0.7;
    bottom: 46px;
  }
  .immediately-snapped-up {
    font-size: 20px;
    opacity: 0.7;
    width: 123px;
    height: 30px;
    border: 1px solid #47484b;
    text-align: center;
    line-height: 30px;
    bottom: 7px;
  }
}
// 个体护肤banner图片比较大  动态绑定
.bigBanner{
  width: 563px;
  height: 283px;
  .bigImg {
    width: 563px;
    height: 282px;
    margin-left: 20px;
  }
}
</style>
